<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h2>同源数据请求</h2>
  <p></p>
  <h2>非同源数据请求-jsonp</h2>
  <p></p>
  <button class="jsonp">非同源数据请求</button>
</body>

</html>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
  let originPlaceHolder = document.getElementsByTagName('p')[0],
    unOriginPlaceHolder = document.getElementsByTagName('p')[1]

    // 同源数据请求
  axios.get('same-origin.json')
    .then(response => {
      console.log(response.data)
      let top10Items = Array.prototype.slice.call(response.data.todoList, 0, 10)
      originPlaceHolder.innerHTML = top10Items.join('<br>')
    })

  // 非同源利用jsonp处理.
  let button = document.querySelector('.jsonp')
  button.addEventListener('click', function () {
    // 利用下载script标签是不存在浏览器同源策略的特点.
    const scriptTag = document.createElement('script')
    scriptTag.type = 'text/javascript'
    // 第一 12345 端口号不同.
    // 第二 callback=show 是传递给12345后台服务器的查询字符串参数.
    // 第三 后台服务器根据拿到了这个callback = show,往前端输出一些文本流.(这里就是和利用下载script标签一模一样.)
    scriptTag.src = 'http://localhost:22222/getUserinfo?callback=show'
    document.body.appendChild(scriptTag)
  },false)

  // 这里的show 方式就是上述 jsonp 中的 callback 查询字符串指定的值.
  function show (user) {
    let dataStr = ""
    for(let prop in user) {
      dataStr += prop  + ":" + user[prop] + "<br>"
    }
    unOriginPlaceHolder.innerHTML = dataStr
  }

</script>